<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" href="static/css/amazeui.css" />
    <link href="static/css/dlstyle.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
  </head>

  <body>
    <div class="login-boxtitle" style="height: 100px">
      <div class="logoBig">
        <img
          src="static/images/logo.png"
          style="margin-left: 0px; height: 100px"
        />
      </div>
    </div>

    <div class="login-banner" style="background: rgb(142, 213, 21)">
      <div class="login-main">
        <div class="login-banner-bg">
          <span></span><img width="400" src="static/images/act2.png" />
        </div>
        <div class="login-box" id="app">
          <h3 class="title">用户注册</h3>
          <h5 :style="colorStyle">&nbsp;{{tips}}</h5>
          <div class="clear"></div>

          <div class="login-form" style="background: none">
            <form>
              <div class="user-name">
                <label for="user"
                  ><span
                    class="glyphicon glyphicon-user"
                    aria-hidden="true"
                  ></span
                ></label>
                <input
                  type="text"
                  v-model="user.username"
                  placeholder="邮箱/手机/用户名"
                  @keyup="checkRegisterInfo"
                />
              </div>
              <div class="user-pass" style="margin-top: 15px">
                <label for="password"
                  ><span
                    class="glyphicon glyphicon-lock"
                    aria-hidden="true"
                  ></span
                ></label>
                <input
                  type="password"
                  v-model="user.password"
                  placeholder="请输入密码"
                  @keyup="checkRegisterInfo"
                />
              </div>
              <div class="user-pass" style="margin-top: 15px">
                <label for="password"
                  ><span
                    class="glyphicon glyphicon-lock"
                    aria-hidden="true"
                  ></span
                ></label>
                <input
                  type="password"
                  v-model="rePassword"
                  placeholder="请再次输入密码"
                  @keyup="checkRegisterInfo"
                />
              </div>
            </form>
          </div>

          <div class="login-links">
            <br />
          </div>
          <div class="am-cf">
            <input
              type="submit"
              value="提交注册"
              class="am-btn am-btn-primary am-btn-sm"
              @click="doRegister"
            />
          </div>
          <div class="partner"></div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="footer-hd"></div>
      <div class="footer-bd">
        <p>
          <a href="# ">联系我们</a>
          <a href="# ">网站地图</a>
        </p>
      </div>
    </div>
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script>
      var baseUrl = "http://localhost:8080/";
      var vm = new Vue({
        el: "#app",
        data: {
          // 绑定user对象
          user: {
            username: "",
            password: "",
          },
          rePassword: "",
          colorStyle: "color:red",
          tips: "",
          isRight: false,
        },
        methods: {
          doRegister() {
            if (!vm.isRight) {
              vm.tips = "请确认注册信息输入完整且正确！";
            } else {
              // 提交注册
              var url = baseUrl + "user/regist";
              axios({
                method: "post",
                url: url,
                data: vm.user,
              }).then((result) => {
                var vo = result.data;
                if (vo.code == 10000) {
                  vm.tips = "注册成功！";
                  vm.colorStyle = "color:green";
                  setTimeout(function () {
                    window.location.href = "login.html";
                  }, 3000);
                } else {
                  vm.tips = "注册失败";
                }
                console.log(result);
              });
            }
          },
          // 校验账号密码
          checkRegisterInfo() {
            // 1.校验账号
            if (vm.user.username == "") {
              vm.tips = "请输入账号！";
              vm.isRight = false;
            } else if (
              vm.user.username.length < 8 ||
              vm.user.username.length > 20
            ) {
              vm.tips = "账号长度必须为8-20个字符";
              vm.isRight = false;
            } else {
              // 2.校验密码
              if (vm.user.password == "") {
                vm.tips = "请输入密码！";
                vm.isRight = false;
              } else if (
                vm.user.password.length < 6 ||
                vm.user.password.length > 16
              ) {
                vm.tips = "密码长度必须为6-16个字符";
                vm.isRight = false;
              } else {
                // 3.校验重复密码
                if (vm.rePassword == "") {
                  vm.tips = "请再次输入密码!";
                  vm.isRight = false;
                } else if (vm.user.password !== vm.rePassword) {
                  vm.tips = "请将输入的密码保存一致！";
                  vm.isRight = false;
                } else {
                  vm.tips = "";
                  vm.isRight = true;
                }
              }
            }
          },
        },
      });
    </script>
  </body>
</html>
